import {
  ActionType,
  ModalForm,
  PageContainer,
  ProColumns,
  ProFormDigit,
  ProFormSwitch,
  ProFormText,
  ProTable
} from "@ant-design/pro-components";
import {Button, Form} from "antd";
import React, {useRef, useState} from "react";
import {EditOutlined, PlusOutlined, SettingFilled} from "@ant-design/icons";
import {globalLoadTableApi, globalLoadTableApiCode, handleGloblApi} from "@/services/admin-api/globalApi";
import {Access, useAccess} from "umi";

type ProductType = {
  ptId: number;
  ptName: string;
  ptSort: number;
  customerHide: boolean;
  indexSwitch: boolean;
  subTitle: string;
  delFlag: boolean;
  createTime: string;
  createUserId: number;
  createUserName: string;
  updateTime: string;
  updateUserId: number;
  updateUserName: string;
};

export default () => {

  const access = useAccess()

  const [modalOpen, handleModalOpen] = useState(false);
  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<ProductType>[] = [
    {title: '类别ID', dataIndex: 'ptId', valueType: 'digit'},
    {title: '类别名称', dataIndex: 'ptName', valueType: 'text'},
    {title: '子标题', dataIndex: 'subTitle', valueType: 'text'},
    {
      title: '隐藏',
      dataIndex: 'customerHide',
      valueType: 'text',
      render: (_, record) => record.customerHide ? '隐藏' : '可见'
    },
    {
      title: '首页开关',
      dataIndex: 'indexSwitch',
      valueType: 'text',
      render: (_, record) => record.indexSwitch ? '开启' : '关闭'
    },
    {title: '排序', dataIndex: 'ptSort', valueType: 'digit', hideInSearch: true,},
    {title: '创建时间', dataIndex: 'createTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '创建用户ID', dataIndex: 'createUserId', valueType: 'digit', hideInSearch: true,},
    {title: '创建用户', dataIndex: 'createUserName', valueType: 'text', hideInSearch: true,},
    {title: '更新时间', dataIndex: 'updateTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '更新用户ID', dataIndex: 'updateUserId', valueType: 'digit', hideInSearch: true,},
    {title: '更新用户', dataIndex: 'updateUserName', valueType: 'text', hideInSearch: true,},
    {
      title: <SettingFilled/>,
      render: (_, record) => [
        <Access accessible={access.canAuth('productType:edit')}>
          <Button
            key={'edit_' + record.ptId} size="small" icon={<EditOutlined/>} type="primary"
            onClick={async () => {
              form.setFieldsValue({...record});
              handleModalOpen(true);
            }}
          /></Access>,
      ],
      valueType: 'option',
    },
  ];

  return <PageContainer header={{title: '', breadcrumb: {},}}>
    <ProTable<ProductType>
      columns={columns} actionRef={actionRef}
      search={{span: 4}}
      headerTitle={
        <Access accessible={access.canAuth('productType:add')}>
          <Button
            key="primary" type="primary" icon={<PlusOutlined/>} onClick={() => {
            handleModalOpen(true)
          }}/>
        </Access>
      }
      request={async (param) => globalLoadTableApiCode('/productType/table', 'productType:list:search', access, param)}
      rowKey={(record) => record.ptId}
      columnsState={{
        defaultValue: {
          delFlag: {show: false},
          createUserId: {show: false},
          updateUserId: {show: false}
        }
      }}/>

    <ModalForm
      modalProps={{destroyOnClose: true}} autoFocusFirstInput submitTimeout={15000}
      width="400px" open={modalOpen} onOpenChange={handleModalOpen} form={form}
      onFinish={async (value) => {
        console.log('value = ', value);
        let success = await handleGloblApi('/productType/saveOrUpdate', value)

        if (success) {
          actionRef.current?.reload();
          return true
        }

      }}
    >
      <ProFormDigit label="类别ID" name="ptId" hidden/>
      <ProFormText label="产品类别" rules={[{required: true}]} name="ptName"/>
      <ProFormText label="子标题" rules={[{required: true}]} name="subTitle"/>
      <ProFormDigit label="排序" tooltip={"正序排列 越小越靠前"} rules={[{required: true}]} name="ptSort"/>
      <ProFormSwitch
        label="首页推荐" tooltip={"首页点上可见"} initialValue={false} rules={[{required: true}]}
        name="indexSwitch"/>
      <ProFormSwitch
        label="隐藏" tooltip={"选中客户不可见"} initialValue={false} rules={[{required: true}]}
        name="customerHide"/>
    </ModalForm>

  </PageContainer>
}
